@charset "utf-8";
@import "reset";
@mixin bgg($width,$height){
    width: $width/2;
    height: $height/2;
}
@mixin img(){
    width:100%;
    height: 100%;
}
@function px($px){
    @return ($px/2);
}
$fontsize:20;
@function r($px){
    @return $px/(2*$fontsize) * 1rem;
}
html,body{
            width: 100%;
            height: 100%;
        }
        #web{
            width: 100%;
            height: 100%;
            position: relative;
        }
        header{
            width: 94%;
            height: r(57);
            background: white;
            position: absolute;
            margin-top: r(48);
            top: 0;
            left: 0;
            div{
                vertical-align: middle;
            }
            .logo{
                float: left;
                width: 16.4%;
                 height: r(57);
                 margin-left: r(23);
                 border: 1px solid #ff9344;
                 border-radius: 12px;
                 text-align: center;
                a{
                     display: block;
                    color: #000000;
                    @include img();
                     border-radius: 8px;
                     font-size: r(26);
                    line-height: r(57);
                    border: none;
                    background: transparent;
                }
            }
           p{
               text-align: center;
               font-size: r(26);
               color: #000;
               line-height: r(57);
           }
         .selectBar{
            width: 21%;
            height: r(54);
            line-height: r(50);
            border: 1px solid #ff9344;
            float: right;
            background: url(../img/down.png) no-repeat right r(12) center;
            background-size:r(30) r(16);
             select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                font-size: r(26);
                text-indent: r(20);
                vertical-align: top;
                color: #000;
                 appearance: none;
                -webkit-appearance:none;
                -moz-appearance:none;
                outline: none;
            }
       }
        }    
        section{
            width: 94%;
            position:absolute;
            left: r(24);
            top: r(124);
            bottom: r(136);
            overflow-y: scroll;
            .swiper-pagination{
                position: static;
            }
            .swiper-pagination-bullet{
                margin-right: r(6);   
                background: #ffc9a1;
            }
           .carous{
               
               .carousImg{
                   li{
                       width: r(150);
                       height: r(150);
                       float: left;
                       margin-right: r(30);
                       p{
                           font-size: r(26);
                           text-align: center;
                           padding-top: r(10);
                       }
                       div{
                           width: 100%;
                           height: r(150);
                            overflow: hidden;
                            border-radius: 50%;
                           img{
                               width: 100%;
                               border-radius: 50%;
                           }
                       }
                       &:first-child{
                           margin-left:r(4) ;
                       }
                       &:last-child{
                           margin-right: r(6);
                          
                           img{
                               transform: scale(3);
                               position: relative;
                               top: r(20);
                           }
                       }
                       
                   }
               }
               .btn{
                   width: r(90);
                   height: r(18);
                   margin: 0 auto;
                   margin-top: r(50);
                   li{
                       width:r(18);
                       height: r(18);
                       background: #ffc9a1;
                       border-radius: 50%;
                       float: left;
                       margin-right: r(6);
                       &.active,&:hover{
                           background: #ff9344;
                       }
                       &:last-child{
                           margin-right: 0;
                       }
                   }
               }
           }
            article{
                .title{
                    width: 100%;
                    margin-top: r(34);
                    p:nth-of-type(1){
                        img{
                           // @include bgg(56px,54px);
                            width: r(56);
                            height: r(54);
                        }
                        span{
                            font-size: r(30);
                            color: #000;
                            line-height: r(54);
                            vertical-align:top;
                        }
                    }
                     p:nth-of-type(2){
                        // margin-right: px(21px);
                        a{
                            color: #000;
                            font-size: r(24);
                            line-height: r(54);
                            i{
                                color: #ff9344;
                                position: relative;
                                top: r(2);
                            }
                        }
                    }
                }
                .shopList{
                    margin-top: r(38);
                    li{
                        float: left;
                        width: r(133);
                        height: r(133);
                        overflow: hidden;
                        margin-right: r(57);
                        &:last-child{
                            margin-right: 0;
                        }
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
        footer{
            width: 100%;
            height:r(136);
            background: white;
            position: absolute;
            bottom: 0;
            left: 0;
            ul li{
                width: 25%;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont{
                    color: transparent;
                    font-size: r(60);
                    -webkit-text-stroke: r(2) #ff9344;
                }
                &.active .iconfont{
                    color: #ff9344;
                }
                &:hover .iconfont{
                    color: #ff9344;
                }
            }
            a{
                color: #000;
                
            }
        }


